import 'normalize.css';
import './styles/border.css';
import './styles/base.css'
// import { useEffect, useRef } from 'react';
import {createHashRouter, RouterProvider} from 'react-router-dom' // 用不上了这几个：HashRouter, Routes, Route, 
import Guide from './containers/Guide';
import Login from './containers/Account/Login';
import Register from './containers/Account/Register';
import Account from './containers/Account';
import Home from './containers/Home';
import Nearby from './containers/Nearby';
import Search from './containers/Search';
import SearchList from './containers/SearchList';
import Detail from './containers/Detail';
import Category  from './containers/Category';
import Cart  from './containers/Cart';
import Order  from './containers/Order';
// 使用嵌套路由的方法对路由进行更改
/**
 * 当访问 /account 路径的时候，Account组件会展示出来
 * 当访问 /account/login 路径的时候，会把<Login>组件注入给<Account> 组件中的<Outlet>组件
 * 当我们访问/account/login 路径的时候  <Outlet> 等价于 <Login> 组件
 * 当我们访问/account/register 路径的时候  <Outlet> 等价于 <Register> 组件
 * 这样就实现了局部动态内容注入的效果
 */
const router = createHashRouter([
  {
    path:'/',
    element: <Guide></Guide>
  },{
    path: '/account',
    element: <Account></Account>,
    children: [{
      path: '/account/login',
      element: <Login></Login>
    },{
      path: '/account/register',
      element: <Register></Register>
    }]
  },{
    path:'/home',
    element: <Home></Home>
  },{
    path:'/nearby',
    element: <Nearby></Nearby>
  },{
    path:'/search/:shopId',
    element: <Search></Search>
  },{
    path:'/searchlist/:shopId/:keyword',
    element: <SearchList></SearchList>
  },{
    path:'/detail/:id',
    element: <Detail></Detail>
  },{
    path:'/category',
    element: <Category></Category>
  },{
    path:'/cart',
    element: <Cart></Cart>
  },{
    path:'/order/:id',
    element: <Order></Order>
  },{
    path:'*', // 当路由每个都没有匹配上的话，默认展示首页
    element: <Home></Home>
  }])
const App = () => {
  // 嵌套路由优化
  return <RouterProvider router={router} />

  // 优化前代码
  // return (
  //   <HashRouter>
  //     <Routes>
  //         {/* <Guide></Guide>*/}
  //       {/* 
  //       路由的概念：就是在浏览器中给我不同的地址路径，我给你展示不同的页面
  //       这句话的意思是当你访问页面的时候，我会从路由中匹配一下
  //       如果访问的是根路径或者根路径#的时候，我会把<Guide>这个页面展示
  //       当访问"/login"路径的时候，浏览器展示<Login></Login>这个组件

  //       HashRouter：哈希路由是通过浏览器哈希后面加路径来，
  //       来给你解析不同的路径，展示不同的内容的，哈希路径的好处是完全建立在
  //       前端体系的内容，不会依赖后端服务器做什么改动，一般来说，如果对服务端不太理解
  //       又做前后端项目，直接写前端即可，未来不需要和服务端做什么交集，不需要做什么
  //       和服务端交互的配置，对新手友好

  //       BrowserRouter:是不带哈希值访问路径
  //       */}
  //       <Route path="/" element={<Guide></Guide>}></Route>
  //       <Route path="/login" element={<Login></Login>}></Route>
  //       <Route path="/register" element={<Register></Register>}></Route>
  //     </Routes>
  //   </HashRouter>
  // ) 
}

export default App;